<template>
    <div @click="login">
      <el-container>
        <el-header>
          <ClassifyHeader></ClassifyHeader>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="6" class="left">
              <ClassifyList></ClassifyList>
            </el-col>
            <el-col :span="18" class="right">
              <ShopList></ShopList>
            </el-col>
          </el-row>
        </el-main>
        <el-footer>
          <MyFooter></MyFooter>
        </el-footer>
      </el-container>
    </div>
  </template>
    
    <script>
  import MyFooter from "../components/MyFooter";
  import ClassifyHeader from "../components/ClassifyHeader";
  import ClassifyList from "../components/ClassifyList";
  import ShopList from "../components/ShopList";
  export default {
    name: "Home",
    components: {
      MyFooter,
      ClassifyHeader,
      ClassifyList,
      ShopList
    },
    methods:{
    login() {
      if (document.cookie == "") {
        this.$router.push({
          path: "/login"
        });
        this.$message({
          message: "登录失效请重新登录",
          center: true,
          showClose: true,
        type: "warning"
        });
      }
    }
    },
  mounted() {
    if (document.cookie == "") {
      this.$router.push({
        path: "/login"
      });
      this.$message({
        message: "登录失效请重新登录",
        center: true,
        showClose: true,
        type: "warning"
      });
    }
  },
  destroyed() {
    if (document.cookie == "") {
      this.$router.push({
        path: "/login"
      });
      this.$message({
        message: "登录失效请重新登录",
        center: true,
        showClose: true,
        type: "warning"
      });
    }
  }
  };
  </script>
    
    <style scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body,
  html {
    width: 100%;
    height: 100%;
  }
  a {
    color: black;
    text-decoration: none;
  }
  li {
    list-style: none;
  }
  .el-container {
    display: flex;
    height: 177.867vw !important;
  }
  .el-main {
    flex-grow: 1;
    margin-top: 11.7333vw;
  }
  .el-header {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 11.7333vw !important;
    background-color: #fff;
  }
  .el-footer {
    width: 100%;
    height: 13.3333vw !important;
  }
  .el-row {
    width: 100% !important;
  }
  .left{
    position: fixed;
    top:11.7333vw;
    left: 0;
  }
  .right{
    position: absolute;
    top: 0;
    right: 0;
  }
  </style>